<template>
  <div class="home">
    <div class="top">
      <div><span>Admin管理后台</span></div>
      <div><span>进入前台</span><span>管理员</span></div>
    </div>
    <div class="main">
      <div class="left">
        <ul>
          <li>欢迎页</li>
          <li>菜单维护</li>
        </ul>
      </div>
      <div class="right">
        <h3>菜单管理-菜单列表</h3>
        <button @click="addshow">新增</button>
        <table border="1" cellspacing="0" cellpadding="0">
          <thead>
            <th>#</th><th>菜单名称</th><th>排序</th><th>菜单menu</th><th>隐藏</th><th>操作</th>
          </thead>
          <tbody>
            <tr v-for="(item,index) in list" :key="index" :class="index%2!=0?'active':''">
              <td>{{index+1}}</td>
              <td>{{item.name}}</td>
              <td>0</td>
              <td>{{item.menu}}</td>
              <td><button @click="orshow(item.id,item.flag,index)">{{item.flag?'隐藏':'显示'}}</button></td>
              <td><button @click="orshow(item.id,item.flag,index)">{{item.flag?'显示':'隐藏'}}</button><button @click="editshow(item.id,index)">编辑</button><button @click="deletes(item.id,index)">删除</button></td>
            </tr>
          </tbody>
        </table>
      </div>
      <div :class="flag?'addalert show':'addalert'">
        <div @click="addshow">x 添加</div>
        <input type="text" v-model="name" placeholder="菜品名称">
        <input type="text" v-model="menu" placeholder="菜品menu">
        <button @click="addlist">添加</button>
      </div>

      <div :class="flag2?'editalert editshow':'editalert'">
        <div @click="editshow">x 编辑</div>
        <input type="text" v-model="name" placeholder="菜品名称">
        <input type="text" v-model="menu" placeholder="菜品menu">
        <button @click="edit">确认</button>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  mounted () {
    axios.get('/api/list').then(res=>{
      console.log(res)
      this.list=res.data.data
    })
  },
  data () {
    return {
      list:[],
      flag:false,
      name:'',
      menu:'',
      flag2:false,
      infoid:0,
      infoindex:0
    }
  },
  methods: {
    addshow(){
      this.flag=!this.flag;
      this.name='';
      this.menu=""
    },
    async addlist(){
      let res = await axios.post('/api/add',{name:this.name,menu:this.menu});
      let ress = await axios.get('/api/list');
      this.list=ress.data.data
      if(res.data.code){
        this.addshow()
      }else{
        alert(res.data.msg)
      }
    },
    async orshow(id,flag,index){
      console.log(id,flag);
      this.list[index].flag=!this.list[index].flag;
      let res = await axios.post('api/show',{id,flag:flag?0:1});
      console.log(res)
    },
    async deletes(id,index){
      if(confirm('是否删除')){
         this.list.splice(index,1);
        await axios.post('/api/delete',{id});
      }
    },
    async editlist(){

    },
    editshow(id,index){
      this.infoid=id;
      this.infoindex = index;
      axios.get(`/api/editinfo?id=${id}`).then(res=>{
        console.log(res)
        this.name = res.data.data[0].name;
        this.menu = res.data.data[0].menu;
      })
      this.flag2 = !this.flag2;
      
    },
    async edit(){
      let res = await axios.post('/api/edit',{id:this.infoid,name:this.name,menu:this.menu});
      
      if(res.data.code){
        this.list[this.infoindex].name= this.name;
        this.list[this.infoindex].menu= this.menu;
        this.name='';
        this.menu=""
        this.flag2 = !this.flag2;
      }else{
        alert(res.data.msg)
      }
    }
  }
}
</script>
<style lang="scss">
  .home{
    width: 100%;
    height: 100%;
    .top{
      width: 100%;
      height: 70px;
      background: #000;
      color: #ccc;
      display: flex;
      align-items: center;
      justify-content: space-between;
      div:nth-of-type(2){
          span{
            margin: 0 5px;
          }
      }
    }
    .main{
      width: 100%;
      height: calc(100% - 70px);
      display: flex;
      .left{
        width: 200px;
        height: 100%;
        background: #333;
        color: #ccc;
        text-indent: 2em;
        ul{
          width: 100%;
          li{
            width: 100%;
            height: 50px;
            margin: 10px 0;
          }
          li:nth-of-type(2){
            background: seagreen;
            line-height: 50px;
          }
        }
      }
      .right{
        width: calc(100% - 200px);
        height: 100%;
         td{
             height: 25px !important;
           }
        table{
          width: calc(100% - 50px);
          height: calc(100% - 50px);
          border-collapse: collapse;
          tbody{
            tr{
              line-height: 30px;
            }
          }
          
          .active{
            background: #ccc;
          }
        }
      }
      .addalert{
        width: 200px;
        height: 100px;
        background: #ccc;
        position: absolute;
        top: 400px;
        left: 400px;
        display: none;
      }
      .addalert.show{
        display: block;
      }
      .editalert{
        width: 200px;
        height: 100px;
        background: #ccc;
        position: absolute;
        top: 400px;
        left: 400px;
        display: none;
      }
      .editalert.editshow{
        display: block;
      }
    }
  }
</style>
